<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.promise可以使指定回调函数的方式更灵活：
        // 纯回调函数必须在启动异步任务之前指定回调函数
        // 而promise 可以在启动异步任务之后指定回调函数， 还可以在异步任务执行结束后才指定回调函数

        // 2.promise支持链式调用，可以解决回调地狱的问题
        // 什么是回调地狱？即回调函数嵌套调用，存在多个串联的异步操作，下一个异步操作依赖于上一个异步操作的结果
        // 回调地狱的缺点：不便于阅读，异常处理比较麻烦
        // 回调地狱的解决方案？
        // （1）使用promise的链式调用
        // （2）解决回调地狱的终极方案：async/await

        
        // 原先处理异步任务的方法：纯回调函数形式
        // function success(data) {
        //     console.log(data);
        // }

        // function error(data) {
        //     console.log(data);
        // }

        // function getData(args, success, error) {
        //     setTimeout(() => {
        //         if (args == 1) {
        //             success('成功')
        //         } else {
        //             error('失败')
        //         }
        //     }, 0)
        // }
        // // 必须在调用异步函数时就传入回调函数
        // getData(1, success, error)
        // getData(0, success, error)


        // promise方法
        // const p = new Promise((reslove, reject) => {
        //     setTimeout(() => {
        //         if (new Date() % 2 === 0) {
        //             reslove('成功')
        //         } else {
        //             reject('失败')
        //         }
        //     }, 2000)
        // })
        // setTimeout(() => {
        //     p.then(value => {
        //         console.log(value);
        //     }, reason => {
        //         console.log(reason);
        //     })
        // }, 3000)


        // 回调地狱
        // function getData1(arg, callback) {
        //     setTimeout(() => {
        //         callback('11111')
        //     }, 1000)
        // }

        // function getData2(arg, callback) {
        //     setTimeout(() => {
        //         callback('222222')
        //     }, 1000)
        // }

        // function getData3(arg, callback) {
        //     setTimeout(() => {
        //         callback('333333')
        //     }, 1000)
        // }

        // function getData4(arg, callback) {
        //     setTimeout(() => {
        //         callback('444444')
        //     }, 1000)
        // }
        // getData1(1, function(value) {
        //     console.log(value);
        //     getData2(2, function(value) {
        //         console.log(value);
        //         getData3(3, function(value) {
        //             console.log(value);
        //             getData4(4, function(value) {
        //                 console.log(44444444);
        //             })
        //         })
        //     })
        // })

        // 使用promise的链式调用解决回调地狱问题
        // getData1()
        //     .then(value => {
        //         return getData2(value)
        //     })
        //     .then(value => {
        //         return getData3(value)
        //     })
        //     .then(value => {
        //         return getData4(value)
        //     })
        //     .catch(error => {

        //     })

        // 解决回调地狱的终极方案：async/await
        // async function getData() {
        //     try {
        //         const data1 = await getData1();
        //         const data2 = await getData2(data1);
        //         const data3 = await getData3(data2);
        //         const data4 = await getData(data3)
        //         console.log('final result', data4);
        //     } catch (error) {

        //     }
        // }
    </script>
</body>

</html>